<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!--vue前端js框架-->
	<link rel="stylesheet" href="css/index.css"> <!-- 放哪无所谓 -->
	<script src="js/vue.js"></script>
	<!-- axios用来向后端发送请求-->
	<script src="js/axios.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/common.js"></script>
</head>

<body>
	<div id="app">
		<el-button type="success" round @click="xin">新增角色</el-button>
		<el-table :data="roleData" style="width: 100%;margin-bottom: 20px;" row-key="roleId" border
			:default-expand-all="isopen" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column prop="roleid" label="ID" sortable width="180"></el-table-column>
			<el-table-column prop="rolename" label="职务" sortable width="180"></el-table-column>
			<el-table-column prop="description" label="描述" sortable width="180"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="warning" @click="rolemenu(scope.$index, scope.row)">分配菜单</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-drawer title="分配菜单" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
			
			<el-tree :data="treeDate" show-checkbox default-expand-all node-key="menuid" highlight-current
				ref="tree" :check-strictly="true" @check="trchange"></el-tree>
			<el-button type="primary" @click="updsub">确定修改</el-button>
		
		</el-drawer>
	
		<el-dialog :title="title" :visible.sync="dialogFormVisible">

			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="角色" :label-width="formLabelWidth" prop="rolename">
					<el-input v-model="form.rolename" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="部门" :label-width="formLabelWidth" prop="description">
					<el-input v-model="form.description" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add('form')">新增</el-button>
			</div>
		</el-dialog>

		<el-dialog title="修改角色信息" :visible.sync="dialogForm" >
			<el-form :model="roleOne" :rules="rules" ref="roleOne" label-width="100px" class="demo-ruleForm">
				<el-input v-model="roleOne.roleid" :label-width="formLabelWidth" type="hidden"></el-input>
				<el-form-item label="角色" :label-width="formLabelWidth" prop="rolename">
					<el-input v-model="roleOne.rolename"></el-input>
				</el-form-item>
				<el-form-item label="部门" :label-width="formLabelWidth" prop="description">
					<el-input v-model="roleOne.description">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogForm = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('roleOne')">修 改</el-button>
			</div>
		</el-dialog>
	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {//数据存储的地方
			dialogTableVisible: false,
			dialogFormVisible: false,
			dialogForm:false,
			title: "新增角色菜单",
			formLabelWidth: '120px',
			treeDate: [],
			roleData: [],
			isopen: false,
			drawer: false,
			direction: 'rtl',
			form: {
				roleId: '',
				rolename: '',
				description: ''
			},
			roleOne: {
				rolename: '',
				description: '',
				roleid: ''
			},
			rules: {
				rolename: [
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				], description: [
					{ required: true, message: '请输入部门', trigger: 'blur' }
				]
			},
			nowroleid:0,//当你点击当前要修改的哪一行的角色id
		},
		methods: {//方法
			updsub(i,row) {
				let treenowArr = this.$refs.tree.getCheckedKeys();//获取当前选中的数组
				let that=this
				axios.post(HTTPPATH + "updaterolemenu",{roleid:this.nowroleid,listMenu:treenowArr}).then((res) => {
							//alert(res.data.msg)
							this.$message({
								message:"修改成功",
								type: 'success'
							})
						})
				this.drawer = false;
			},
			trchange(a,b){
				//console.log(a.children)
				let treenowArr=this.$refs.tree.getCheckedKeys();//获取当前选中的数组
				treenowArr.push(a.parentid)//把当前节点的父id加入到树里面 点击子节点的时候父节点也会被勾上
				
				
				//点击取消父节点的时候要把子节点的勾勾也去掉
				if(a.children!=null){
					const children = a.children.map((obj) => obj.menuid);//获取当前子节点的所有id集合
					treenowArr=treenowArr.filter(item => !children.includes(item))
				}
				this.$refs.tree.setCheckedKeys(treenowArr);
				
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post(HTTPPATH + "updateRoleinfo", this.roleOne).then((res) => {
							alert(res.data)
							this.init()//初始化方法	
							this.dialogFormVisible = false
							this.dialogForm=false
						})
					}

				})
			},
			edit(index, row) {
				this.dialogForm = true
				axios.get(HTTPPATH + "roleOne?id=" + row.roleid).then((res) => {
					this.roleOne = res.data.data.roleOne
					console.log(this.roleOne)
				});
			},
			xin() {
				this.dialogFormVisible = true;
			},
			add(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
						axios.post(HTTPPATH + "insrole", this.form).then((result) => {
							alert(result.data);
							location.reload();
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => { });
			},
			rolemenu(index, row) {
				console.log(row)
				this.dialogTableVisible = true
				this.nowroleid=row.roleid
				this.drawer = true
				this.initTreeDate()//初始化树形数据
				let that = this
				axios.get(HTTPPATH + "sleromenuroleid/" + row.roleid).then((result) => {
					console.log(result.data);
					let slist = result.data.data.rolemenu;
					const arr = slist.map((obj) => obj.menuid);//取数组对象里面的属性
					that.$refs.tree.setCheckedKeys(arr);
					console.log(arr + "==============")
				})


			},
			handleDelete(index, row) {
				console.log(row)


			},

			init() {
				let that = this
				axios.get(HTTPPATH + "rolelist").then((result) => {
					console.log(result.data);
					that.roleData = result.data.data.role
				})
			},
			initTreeDate() {
				let that = this
				axios.get(HTTPPATH + "menu").then((result) => {
					console.log(result.data.data.menu);
					let s = arrayToTree(result.data.data.menu)
					console.log(s)
					that.treeDate = s
				})

			}
		}, created() {//创建后
			this.init()
		}

	})
</script>

</html>